<template>
  <view class="mine">
    <view class="conent">
      <view class="title" :style="{ backgroundImage: `url(${userRes?.profile?.backgroundUrl})` }">
        <view class="title-text">
          <image v-if="useMusicStore().userStatusType" :src="userRes?.profile?.avatarUrl" class="logo" @click="loginOut" />
          <image v-else src="/static/logo.png" class="logo" @click="goLogin" />
          <view class="name">{{ userRes?.profile?.nickname }}</view>
          <view class="detail">
            <view class="detail-item">
              <text>{{ userRes?.profile?.follows }}</text><text>关注</text>
            </view>
            <view class="detail-item">
              <text>{{ userRes?.profile?.followeds }}</text><text>粉丝</text>
            </view>
            <view class="detail-item">
              <text>{{ userRes?.level }}</text><text>等级</text>
            </view>
            <view class="detail-item">
              <text>{{ userRes?.listenSongs? userRes?.listenSongs+'首' : '' }}</text><text>听歌</text>
            </view>
          </view>
        </view>
      </view>
      <view class="song-list" 
        v-if="useMusicStore().userStatusType" 
        style="border-top: 1px solid #eee;margin-top: 20rpx;"
        >
        <SongList
          v-for="(item, index) in userSongList"
          :key="item.id"
          :songListItem="item"
          @click="goSongList(item.id)"
          style="margin-top: 20rpx" />
      </view>
      <view v-else class="no-song">
        <text class="no-song-text">暂无歌曲</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SongList from './components/songList.vue'
import type { UserPlaylistType, UserDetailType } from '@/services/type'
import { LogoutApi } from '@/services/index'
import { useMusicStore } from '@/store/listMusic'


const userStore = useMusicStore()
const userSongList = ref<UserPlaylistType[]>([]) // 用户歌单
const userRes = ref<UserDetailType>() // 用户信息
userSongList.value = userStore.userSongList
userRes.value = userStore.userInfo

// 未登录则跳转登录页
const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}
// 退出登录
const loginOut = () => {
  LogoutApi()
  .then(() => {
    userStore.getUserStatus()
    // 刷新页面
    uni.showToast({
      title: '退出成功',
      icon: 'none'
    })
    // window.location.reload()
    console.log('退出成功', userStore.userStatusType)
    uni.switchTab({
      url: '/pages/index/index'
    })
  })
}
// 去单个歌单列表
const goSongList = (id: number) => {
  uni.navigateTo({
    url: `/pages/songlist/songlist?id=${id}`
  })
}


</script>

<style lang="scss" scoped>
.mine {
  height:100vh;
  width:100vw;
  .conent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .title {
      height: 480rpx;
      width: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: cover;
      .title-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        image {
          border-radius: 50%;
          width: 120rpx;
          height: 120rpx;
          overflow: hidden;
        }
        .name {
           font-size: 36rpx;
           color: white;
           margin-top: 20rpx;
         }
        .detail {
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
           margin-top: 20rpx;
          .detail-item {
             display: flex;
             flex-direction: column;
            //  justify-content: center;
             width: 140rpx;
             align-items: center;
             margin-right: 20rpx;
            //  text-align: center;
             text {
               &:first-child {
                 margin-bottom: 10rpx;
                 font-size: 32rpx;
                 font-weight: bold;
                 color: white;
               }
               &:last-child {
                 font-size: 28rpx;
                 color: #666;
               }
             }
          }
        }
      }
    }
    .song-list {
      flex: 1;
      overflow: hidden;
      overFlow-y:auto;
    }
    .no-song {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
